$pref_highlight_color_dark: orange;
$pref_highlight_color_light: red;


:root {
	--pref-highlight-color: #{$pref_highlight_color_dark};
	--pref-highlight-color-hover: #{darken($pref_highlight_color_dark, 20%)};

	// ANY LIGHT/DARK MODE SETTINGS ^v
	@media (prefers-color-scheme: light) {
		--pref-highlight-color: #{$pref_highlight_color_light};
		--pref-highlight-color-hover: #{darken($pref_highlight_color_light, 20%)};

	}
}

body * {
	transition: all 0.2s ease-in-out;
}

// Space between groups
.group {
	margin-bottom: 40px;

	.field {
		button {
			display: inline-block;
			outline: none;
			cursor: pointer;
			font-size: 16px;
			line-height: 20px;
			font-weight: 600;
			border-radius: 8px;
			padding: 14px 24px;
			border: none;
			transition: box-shadow 0.2s ease 0s, -ms-transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s, transform 0.1s ease 0s;
			color: #fff;
			text-transform: inherit;
			background: linear-gradient(to right, #9147ff 0%, #6200ee 100%);

		}

		&.key-resetApp button {
			background: linear-gradient(to right, rgb(230, 30, 77) 0%, rgb(227, 28, 95) 50%, rgb(215, 4, 102) 100%);
		}

		&.key-crosshair {
			.value {
				display: none;
			}
		}
	}
}

a {
	color: var(--pref-highlight-color, orange);
	&:hover {
		color: var(--pref-highlight-color-hover, maroon);
	}
}

